<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>#(SEO_TITLE ?? WEB_TITLE ?? '未设置') - 相册</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no"/>
    <meta name="renderer" content="webkit"/>
    <meta name="force-rendering" content="webkit"/>
    <meta name="keywords" content="#(SEO_KEYWORD ??) 相册">
    <meta name="description" content="#(SEO_DESC ??) 相册">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <link rel="Shortcut Icon" href="#option('WEB_LOGO','/static/public/images/favicon.ico')" type="image/x-icon"/>
    <link rel="stylesheet" href="/static/public/libs/layui-v2.5.6/layui/css/layui.css">
    <link rel="stylesheet" href="/static-plugin/photos/static/css/index.css">
    <link rel="stylesheet" href="/static-plugin/photos/static/lib/viewerjs/viewer.min.css">
    <script src="/static-plugin/photos/static/laysize.js"></script>
</head>
<body>
    <div class="header">
        <ul>
            <li class="header-item web-name">
                <a href="/">dolphin</a>
            </li>
            <li class="header-item">
                <a href="/">博客</a>
            </li>
            <li class="header-item">
                <a href="/photos">相册</a>
            </li>
        </ul>
    </div>
    <div class="layui-container">
        <div class="layui-row">
            <input name="id" id="id" value="#(photos.id)" style="display: none">
            <input name="isEncryption" id="isEncryption" value="#(photos.isEncryption)" style="display: none;">
            <div class="photos-detail">
                <span><i class="layui-icon layui-icon-picture-fine"></i>&nbsp;标题:  #(photos.name)</span>
                <span><i class="layui-icon layui-icon-date"></i>&nbsp;日期:  #(photos.name)</span>
                <span><i class="layui-icon layui-icon-about"></i>&nbsp;描述:  #(photos.name)</span>
            </div>
            #if(photos.isEncryption == 1)
                <div class="password-verify">
                    <input name="password" type="password" id="password" placeholder="请输入密码访问">
                    <button id="submit">提交</button>
                </div>
            #end

            <div class="layui-row photo-list" id="photo-list">

            </div>
            <div id="laypage">

            </div>
        </div>
    </div>

    <div class="footer">
            <span class="m-footer-left">
                #option('WEB_COPYRIGHT', 'Copyright dolphin')
            </span>
        <span class="m-footer-right">
                Powered by <a href="http://www.dolphin.org.cn" target="_blank">dolphinBlog</a>
            </span>
    </div>
</body>
<script id="photoTpl" type="text/html">
    {{#  layui.each(d, function(index, item){ }}
        <div class="layui-col-xs6 layui-col-sm4 layui-col-md3 layui-col-lg2 photos-box">
            <a class="photos">
                <img src="/static-plugin/photos/static/img/loading.gif" alt="{{item.name}}" class="lazyload coverImg" data-src="/static-plugin/photos{{item.url}}">
            </a>
        </div>
    {{#  }); }}
</script>
<script src="/static/public/libs/jquery/jquery-3.5.1.min.js"></script>
<script src="/static/public/libs/layui-v2.5.6/layui/layui.all.js"></script>
<script src="/static-plugin/photos/static/lib/viewerjs/viewer.min.js"></script>
<script>
    var viewer = new Viewer(document.getElementById('photo-list'), {
        url: 'data-src',
        title: 'alt',
        zIndex: 99999
    });

    let layer, laytpl,laypage;
    layui.use(['layer', 'laytpl','laypage'], function () {
        layer = layui.layer;
        laytpl = layui.laytpl;
        laypage = layui.laypage;
        let page=1;
        let limit=18;

        $("#submit").click(function (){
            let password = $("#password").val();
            if (password === "" || password === null) {
                layer.msg("请输入密码", {icon: 2});
                return;
            }
            loadData();
        });

        if ($("#isEncryption").val() !== 1 && $("#isEncryption").val() !== "1") {
            loadData();
        }

        function loadData(){
            $.ajax({
                type: "POST",
                url: "/photos/photoList",
                contentType: "application/json",
                data: JSON.stringify({
                    pageIndex: page,
                    pageSize: limit,
                    form: {
                        photosId: $("#id").val(),
                        password: $("#password").val()
                    }
                }),
                success: function (data) {
                    if (data.code === 200) {
                        $(".password-verify").hide();
                        if (data.total <= 0) {
                            $(".photo-list").html(
                                `<div class="no-content">这里什么都没有~</div>`
                            );
                            return;
                        }
                        laytpl($("#photoTpl").html()).render(data.data, function (html) {
                            $(".photo-list").html(html);
                        });
                        laypage.render({
                            elem: 'laypage',
                            count: data.total,
                            limit:limit,
                            curr: page,
                            jump: function(obj, first){
                                page = obj.curr;
                                limit = obj.limit;
                                if(!first){
                                    loadData()
                                }
                            }
                        });
                        viewer.update();
                    } else {
                        layer.msg(data.msg, {icon: 2});
                    }
                },
                error: function (data) {
                    layer.msg("加载图片列表失败", {icon: 2});
                }
            });
        }
    });
</script>
</body>
</html>
